<template>
  <div class="personal-finance">
    <!-- 头部标题 -->
    <div class="header">
      <h2>个人财物管理</h2>
    </div>

    <!-- 财物列表 -->
    <el-table
        :data="financeItems"
        style="width: 80%"
        border
        stripe
        empty-text="暂无财物记录"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @sort-change="handleSortChange"
    >
      <!-- 财物名称列 -->
      <el-table-column
          prop="name"
          label="财物名称"
          width="180"
          align="center"
      ></el-table-column>

      <!-- 财物类型列 -->
      <el-table-column
          prop="type"
          label="财物类型"
          width="180"
          align="center"
      ></el-table-column>

      <!-- 财物金额列 -->
      <el-table-column
          prop="amount"
          label="金额"
          width="180"
          align="center"
      ></el-table-column>

      <!-- 财物日期列 -->
      <el-table-column
          prop="date"
          label="日期"
          width="200"
          sortable
          align="center"
      ></el-table-column>

      <!-- 操作列：编辑、删除 -->
      <el-table-column
          label="操作"
          width="180"
          align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editFinanceItem(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteFinanceItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 添加新财物按钮 -->
    <div class="add-button">
      <el-button type="primary" @click="showAddFinanceDialog">添加新财物</el-button>
    </div>

    <!-- 添加新财物对话框 -->
    <el-dialog
        :visible.sync="showAddDialog"
        title="添加新财物记录"
        width="30%"
        @close="hideAddFinanceDialog"
    >
      <el-form :model="newFinanceItem" :rules="rules">
        <!-- 财物名称 -->
        <el-form-item label="财物名称" prop="name">
          <el-input v-model="newFinanceItem.name"></el-input>
        </el-form-item>

        <!-- 财物类型 -->
        <el-form-item label="财物类型" prop="type">
          <el-input v-model="newFinanceItem.type"></el-input>
        </el-form-item>

        <!-- 财物金额 -->
        <el-form-item label="金额" prop="amount">
          <el-input-number v-model="newFinanceItem.amount" :controls="false" :min="0"></el-input-number>
        </el-form-item>

        <!-- 财物日期 -->
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="newFinanceItem.date" type="date"></el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="hideAddFinanceDialog">取消</el-button>
        <el-button type="primary" @click="addFinanceItem">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from '../axios/index'; // 导入 Axios

export default {
  name: 'personalFinance',
  data() {
    return {
      financeItems: [], // 存储财物列表数据
      showAddDialog: false, // 控制是否显示添加对话框
      newFinanceItem: {
        name: '',
        type: '',
        amount: 0,
        date: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入财物名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入财物类型', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      }
    };
  },
  created() {
    // 在组件创建时发送请求获取财物列表数据
    axios.get('/finance') // 根据后端接口路径调整
        .then((response) => {
          // 请求成功后，更新本地数据
          this.financeItems = response.data;
        })
        .catch((error) => {
          console.error('获取财物列表失败:', error);
        });
  },
  methods: {
    // 编辑财物记录
    editFinanceItem(item) {
      // 打开编辑对话框，并将当前财物信息填充到编辑表单中
      this.editDialogVisible = true;
      this.editFinanceItemForm = { ...item };
    },

// 编辑对话框中的保存按钮点击事件处理
    saveEditedFinanceItem() {
      // 向后端发送请求，更新财物记录
      axios.put(`/finance/${this.editFinanceItemForm.id}`, this.editFinanceItemForm)
          .then(response => {
            // 更新成功后，刷新财物列表或者其他操作
            this.fetchFinanceItems();
            this.editDialogVisible = false;
            this.$message.success('编辑成功');
          })
          .catch(error => {
            console.error('编辑财物记录失败:', error);
            this.$message.error('编辑失败');
          });
    },

    // 删除财物记录
    deleteFinanceItem(item) {
      axios
          .delete(`/finance/${item.id}`)
          .then(() => {
            // 请求成功后，更新本地数据
            const index = this.financeItems.indexOf(item);
            if (index !== -1) {
              this.financeItems.splice(index, 1);
            }
          })
          .catch((error) => {
            console.error('删除财物记录失败:', error);
          });
    },
    // 处理表格排序变化
    handleSortChange({ prop, order }) {
      // 使用 Array.sort() 来排序 financeItems 数组
      this.financeItems.sort((a, b) => {
        if (order === 'ascending') {
          return new Date(a[prop]) - new Date(b[prop]);
        } else {
          return new Date(b[prop]) - new Date(a[prop]);
        }
      });
    },
    // 显示添加新财物对话框
    showAddFinanceDialog() {
      this.showAddDialog = true;
    },
    // 隐藏添加新财物对话框
    hideAddFinanceDialog() {
      this.showAddDialog = false;
    },
    // 添加新财物记录
    addFinanceItem() {
      // 格式化日期为'YYYY-MM-DD'
      const formattedDate = new Date(this.newFinanceItem.date).toISOString().split('T')[0];
      // 创建一个包含格式化日期的新财物记录
      const newFinanceItemWithFormattedDate = {
        ...this.newFinanceItem,
        date: formattedDate
      };
      // 向后端发送新财物记录
      axios.post('/finance', newFinanceItemWithFormattedDate)
          .then((response) => {
            // 请求成功后，更新本地数据
            this.financeItems.push(response.data);
            this.showAddDialog = false;
            this.resetAddFinanceForm();
          })
          .catch((error) => {
            console.error('添加财物记录失败:', error);
          });
    },

    // 重置新财物记录表单
    resetAddFinanceForm() {
      this.newFinanceItem = {
        name: '',
        type: '',
        amount: 0,
        date: ''
      };
    }

  }
}
</script>

<style scoped>
.el-table {
  margin: 0 auto;
}
.personal-finance {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.add-button {
  text-align: right;
  margin-top: 20px;
}
</style>
